<template>
  <div class="table-wrapper">
    <el-config-provider :locale="zhCn">
      <el-table :data="mapStore.basicInfoTableData" style="width: 100%" :row-style="tableRowStyle" height="200px" border
        v-loading="mapStore.loading" element-loading-text="加载中..." class="el-table-custom" @row-click="handleRowClick">
        <el-table-column prop="licensePlate" label="机动车号牌号码" min-width="18%" fixed sortable="custom" />
        <el-table-column prop="brand" label="品牌" min-width="18%" sortable="custom" />
        <el-table-column prop="owner" label="所有人" min-width="12%" sortable="custom" />
        <el-table-column prop="IDNumber" label="公民身份号码" min-width="20%" sortable="custom" />
        <el-table-column prop="phone" label="联系电话" min-width="16%" sortable="custom" />
        <el-table-column prop="type" label="车辆类型" min-width="16%" sortable="custom" />
      </el-table>
    </el-config-provider>
  </div>
</template>

<script setup>
import zhCn from "element-plus/es/locale/lang/zh-cn";
import { formatTimestamp } from "@/tools/utils.js";
import { getVehicleList } from "@/api/getAjaxData";
import pinia from "@/store/pinia";
import { useMapStore } from "@/store/map";
const mapStore = useMapStore(pinia);

const tableRowStyle = (row) => {
  return row.rowIndex % 2 === 0
    ? { background: "rgba(14, 95, 255, 0.05)", cursor: "pointer" }
    : { background: "rgba(14, 95, 255, 0.15)", cursor: "pointer" };
};

const handleRowClick = (row, column, event) => {
  let startDateTime, endDateTime;
  if (mapStore.dateTimeRange.length === 0) {
    startDateTime = formatTimestamp(new Date().getTime() - 30 * 86400000);
    endDateTime = formatTimestamp(new Date().getTime());
  } else {
    startDateTime = mapStore.dateTimeRange[0];
    endDateTime = mapStore.dateTimeRange[1];
  }

  const queryInfo = {
    vehicleNumberList: [row.licensePlate],
    startDateTime,
    endDateTime,
  };

  getVehicleList(queryInfo)
    .then((res) => {
      mapStore.pointVisible = false;
      mapStore.allPointsVisible = false;
      mapStore.polylineVisible = true;
      mapStore.polylineData = res["vehicleTrack"][0];
      mapStore.polylineKey = new Date().toString();
    });
}
</script>

<style scoped>
@import "@/assets/main.css";

.el-table {
  --el-table-border-color: rgba(14, 95, 255, 0.25);
  /* --el-table-border: none; */
  --el-table-text-color: #bdbdbe;
  --el-table-header-text-color: #bdbdbe;
  /* --el-table-row-hover-bg-color: transparent; */
  --el-table-row-hover-bg-color: rgba(14, 95, 255, 0.25);
  --el-table-current-row-bg-color: transparent;
  --el-table-header-bg-color: rgba(14, 95, 255, 1);
  ;
  --el-table-bg-color: transparent;
  --el-table-tr-bg-color: transparent;
  --el-table-expanded-cell-bg-color: transparent;
}

.el-table-custom /deep/ .el-table__row {
  cursor: pointer !important;
}

.el-table-custom /deep/ th .cell {
  font-weight: bold !important;
}

.table-wrapper /deep/ .el-table-custom th {
  background: rgba(14, 95, 255, 0.25) !important;
  color: rgba(189, 189, 190);
}
</style>